<template>
  <div id="app">
    <!-- 添加loading状态，避免初始化时的闪动 -->
    <div v-if="isInitializing" class="app-loading">
      <div class="loading-spinner">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
    </div>
    <div v-else>
      <Navbar />
      <router-view />
    </div>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    Navbar
  },
  
  data() {
    return {
      isInitializing: true
    }
  },
  
  computed: {
    ...mapState('user', ['isLoggedIn'])
  },
  
  async mounted() {
    // 初始化用户认证状态
    await this.$store.dispatch('user/initAuth')
    
    // 短暂延迟后显示界面，确保状态稳定
    setTimeout(() => {
      this.isInitializing = false
    }, 200)
  },
  
  methods: {
    ...mapActions('user', ['initAuth'])
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

/* 加载状态样式 */
.app-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #409EFF;
}

.loading-spinner i {
  font-size: 24px;
  animation: rotating 1s linear infinite;
}

.loading-spinner span {
  font-size: 14px;
  color: #666;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>